---
import { logos } from 'virtual:starlight/user-images';
import config from 'virtual:starlight/user-config';
import type { Props } from '@astrojs/starlight/props';
const { siteTitleHref } = Astro.props;
---

<a href={siteTitleHref} class="site-title sl-flex">
	{
		config.logo && logos.dark && (
			<>
				<img
					class:list={{ 'light:sl-hidden print:hidden light-logo': !('src' in config.logo) }}
					alt={config.logo.alt}
					src={logos.dark.src}
					width={logos.dark.width}
					height={logos.dark.height}
				/>
				{/* Show light alternate if a user configure both light and dark logos. */}
				{!('src' in config.logo) && (
					<img
						class="dark:sl-hidden print:block dark-logo"
						alt={config.logo.alt}
						src={logos.light?.src}
						width={logos.light?.width}
						height={logos.light?.height}
					/>
				)}
			</>
		)
	}
</a>

<style>
	.site-title {
		align-items: center;
		gap: var(--sl-nav-gap);
		font-size: var(--sl-text-h4);
		font-weight: 600;
		color: var(--sl-color-text-accent);
		text-decoration: none;
		white-space: nowrap;
	}
	img {
		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
		width: auto;
		max-width: 100%;
		min-width: var(--sl-nav-height);
		object-fit: contain;
		object-position: 0 50%;
	}

	@media (max-width: 768px) {
		img.dark-logo {
			content: url('/src/assets/logo-dark.svg');
		}

		img.light-logo {
			content: url('/src/assets/logo-light.svg');
		}
	}
</style>
